<template>
  <div class="main" id="main"></div>
</template>

<script setup>
import * as echarts from 'echarts'
import { ref, onMounted } from 'vue'
import 'echarts-gl'
import earth from '@/assets/img/earth.jpg'
import bathymetry_bw_composite_4k from '@/assets/img/bathymetry_bw_composite_4k.jpg'
import starfield from '@/assets/img/starfield.jpg'
import night from '@/assets/img/night.jpg'
import clouds from '@/assets/img/clouds.png'
import dayjs from 'dayjs'
var ROOT_PATH = 'https://echarts.apache.org/examples'
onMounted(() => {
  var chartDom = document.getElementById('main')
  var myChart = echarts.init(chartDom)
  var option
  option = {
    backgroundColor: '#000',
    globe: {
      baseTexture: earth,
      heightTexture: bathymetry_bw_composite_4k,
      displacementScale: 0.1,
      shading: 'realistic',
      environment: starfield,
      light: {
        ambient: {
          intensity: 0.1
        },
        main: {
          intensity: 1.5,
          time: dayjs(new Date()).format('YYYY-MM-DD HH:mm:ss')
        }
      },
      layers: [
        {
          type: 'blend',
          blendTo: 'emission',
          texture: night
        },
        {
          type: 'overlay',
          texture: clouds,
          shading: 'lambert',
          distance: 10
        }
      ]
    },
    series: []
  }
  option && myChart.setOption(option)
})


</script>

<style lang="scss" scoped>
.main {
  width: 100%;
  height: 100vh;
}
</style>